<!--门禁组管理-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-del="handleDelete">
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="addDoorGroup()">新增
          </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
              class="filter-item"
              icon="el-icon-view"
              size="mini"
              type="warning"
              @click.native="seeHandle(scope.row,scope.index)">查看
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click.native="editHandle(scope.row,scope.index)">编辑
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
        <template slot="inWhetherSend" slot-scope="scope">
          <p v-if="scope.row.inWhetherSend == '1'">是</p>
          <p v-if="scope.row.inWhetherSend == '0'">否</p>
          <p v-if="scope.row.inWhetherSend == null">未设置</p>
        </template>
        <template slot="outWhetherSend" slot-scope="scope">
          <p v-if="scope.row.outWhetherSend == '1'">是</p>
          <p v-if="scope.row.outWhetherSend == '0'">否</p>
          <p v-if="scope.row.outWhetherSend == null">未设置</p>
        </template>
        <template slot="updateTime" slot-scope="scope">
          <p v-if="scope.row.updateTime == ''">未修改</p>
          <p v-else-if="scope.row.updateTime == null">未修改</p>
          <p v-else>{{ scope.row.updateTime }}</p>
        </template>
        <template slot="createTime" slot-scope="scope">
          <p v-if="scope.row.createTime == ''">暂无数据</p>
          <p v-else-if="scope.row.createTime == null">暂无数据</p>
          <p v-else>{{scope.row.createTime}}</p>
        </template>
      </avue-crud>

      <!--  新增组别弹窗-->
      <el-dialog
          :visible.sync="dialogAddVisible"
          ref="dialogForm"
          :close-on-click-modal="false"
          center title="新增门禁组" width="35%" @close="dictItemVisible">
        <el-form :rules="rules">
          <el-form-item class="door-search" label="门禁组名称" prop="groupName">
            <el-input v-model="groupName" class="search-style" placeholder="请输入名称" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="进向推送" prop="inWhetherSend">
            <el-switch
                v-model="inWhetherSend"
                :active-value="1"
                :inactive-value="0"
                style="margin-right: 20px">
            </el-switch>
          </el-form-item>
          <el-form-item label="出向推送" prop="outWhetherSend">
            <el-switch
                v-model="outWhetherSend"
                :active-value="1"
                :inactive-value="0"
                style="margin-right: 20px">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
              class="filter-item"
              size="small"
              @click="dictItemVisible()">取消
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="saveAddVisible()">确定
          </el-button>
        </div>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
import {addDoor, delDoor, doorList} from '@/api/door/access'

export default {
  name: 'equipGroup',
  data() {
    return {
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dialogAddVisible: false,
      tableLoading: false,
      doorData: [],
      inWhetherSend:'1' || '0',  //进向推送
      outWhetherSend:'1' || '0',  //出向推送
      groupName: '',             //组名称
      rules: {  //必填项（验证规则）
        groupName: [
          {required: true, trigger: "none", message: "门禁组名称不能为空",}
        ],
        inWhetherSend: [
          {required: true, trigger: "none"}
        ],
        outWhetherSend: [
          {required: true, trigger: "none"}
        ],
      },
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        menuWidth:270,
        menuType: 'button',
        align: 'center',
        emptyBtnText: '重置', //清空按钮文案
        refreshBtn: true,
        showClomnuBtn: false,
        searchSize: 'mini',
        searchMenuSpan: 6,
        searchLabelWidth: 86,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        excelBtn: false,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '组名称',
            prop: 'groupName',
            search:true,
          },
          {
            label: '进向推送',
            prop: 'inWhetherSend',
            slot:true,
          }, {
            label: '出向推送',
            prop: 'outWhetherSend',
            slot:true,
          },
          {
            label: '修改时间',
            prop: 'updateTime',
            slot:true,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            slot:true,
          },
        ]
      }
    }
  },
  computed: {
  },
  //从子页面跳回时进行刷新
  activated() {
    this.page.currentPage = 1
    this.getList(this.page)
  },
  methods: {
    //展示门禁组列表
    getList(page, params) {
      this.tableLoading = true
      doorList(Object.assign({
        descs: 'create_time',  //是否倒序
        current: page.currentPage,
        size: page.pageSize,
        timeType: 1,
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //新增门禁组弹窗
    addDoorGroup() {
      this.dialogAddVisible = true;
    },

    //新增门禁组保存
    saveAddVisible() {
      let param={
        groupName:this.groupName,
        inWhetherSend:this.inWhetherSend,
        outWhetherSend:this.outWhetherSend,
      }
      addDoor(param).then(res =>{
            if(res.data.code === 0){
              this.doorData= res.data.data.records
              this.dialogAddVisible=false;
              this.$message.success('添加成功')
              this.getList(this.page)
            }
          }
      )
    },

    //新增门禁组关闭弹窗
    dictItemVisible: function () {
      this.dialogAddVisible = false
      this.groupName = null;
      this.inWhetherSend = 0;
      this.outWhetherSend = 0;
      this.currentPage1 = 1
    },

    //删除门禁组
    handleDelete:function (row) {
      const confirmText = ['是否确认删除组别', '，删除后相关通行权限将会失效,请谨慎操作!']
      const newDatas = []
      const h = this.$createElement
      for (const i in confirmText) {
        newDatas.push(h('p', null, confirmText[i]))
      }
      this.$confirm(
          '提示',
          '提示',
          {
            title: '提示',
            // center:true,
            message: h('p', null, [
              h('span', '是否确认删除组别“'+row.groupName+'”?'),
              h('p',{style: 'color:red;margin:5px 10px 0 0'},'删除后相关通行权限将会失效,请谨慎操作!'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal:false,
          }).then(function () {
        return delDoor(row.id)
      }).then(() => {
        this.getList(this.page)
        this.$message.success('删除成功')
      })
    },

    //查看跳转页面
    seeHandle(row) {
      const src = `/door/equipGroup-view`
      this.$router.push({
        path: src,
        query: {
          id: row.id,
          groupName: row.groupName,
          inWhetherSend: row.inWhetherSend,
          outWhetherSend: row.outWhetherSend
        }
      })
    },

    //编辑跳转页面
    editHandle(row) {
      const src = `/door/equipGroup-edit`
      this.$router.push({
        path: src,
        query: {id: row.id,groupName:row.groupName,inWhetherSend:row.inWhetherSend,outWhetherSend:row.outWhetherSend}
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },

    //清空时重置页面
    searchReset() {
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/ .el-form-item__label {
  text-align: left;
}

/deep/ .avue-form__row {
  padding-left: 0 !important;
  margin-right: 36px;
}
/deep/.el-table--small td, .el-table--small th{
  padding: 1px 0;
}
</style>
